<template>
	<view>
		<!-- pages/news_list/news_list.wxml -->
		<view class="news_list">
			<view class="contain">
				<view class="banner">
					<swipers :pid="14" height="284rpx" padding="10rpx"></swipers>
				</view>
				<view class="category-list mt20 ml20 mr20 row">
					<view class="category-item" v-for="(v,k) in categoryList" @click="changeActive(v.id)">
						<image :src="v.image" class="cover"></image>
						<text class="title" v-text="v.name"></text>
					</view>
				</view>
				<view class="main">
					<view class="article-list">
						<view v-for="(item, index) in newsList" :key="index" :data-id="item.id" class="article-item bg-white" @tap="goPage">
							<!-- <image v-if="item.image" :src="item.image" style="width: 100%;height: 300rpx;display: block;"></image> -->
							<view class="nr line2" v-html="item.title"></view>
							<view class="row mt20">
								<u-image width="33.33%" height="140rpx" :src="val" class="mr10" v-for="(val,key) in item.images"></u-image>
							</view>
							<view class="row mt10" style="color: #dddddd;">
								{{item.create_time}}
							</view>
						</view>
					</view>
					<loading-footer :status="status" slotEmpty>
						<view slot="empty" class="column-center" style="padding-top: 100rpx">
							<image class="img-null" src="/static/images/news_null.png"></image>
							<text class="nr muted">暂无数据～</text>
						</view>
					</loading-footer>
				</view>
			</view>
		</view>
		<!-- <loading-view v-if="showLoading"></loading-view> -->
	</view>
</template>

<script>
	import {
		getCategoryList,
		getArticleList
	} from '../../api/new';
	import {
		loadingType
	} from '../../utils/type';
	import swipers from "../../components/swipers/swipers";
	import {
		loadingFun
	} from '@/utils/tools'

	export default {
		data() {
			return {
				active: 0,
				showLoading: true,
				categoryList: [],
				newsList: [],
				page: 1,
				status: loadingType.LOADING,
				bannerList: [],
				type: 0
			};
		},

		components: {
			swipers,
		},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			//分类id
			this.id = options.id; //type存在则为帮助中心

			this.type = options.type || '';

			if (this.type) {
				uni.setNavigationBarTitle({
					title: '帮助中心'
				});
			} else {
				uni.setNavigationBarTitle({
					title: '商城资讯'
				});
			}

			this.getCategoryListFun();
		},

		onReachBottom: function() {
			this.getArticleListFun();
		},


		methods: {
			changeActive(e) {
				this.active = e;
				this.page = 1;
				this.newsList = [];
				this.status = loadingType.LOADING
				setTimeout(() => {
					this.getArticleListFun();
				}, 100);
			},

			getCategoryListFun() {
				getCategoryList({
					type: this.type
				}).then(res => {
					if (res.code == 1) {
						this.categoryList = res.data
						this.getArticleListFun();
					}
				});
			},

			getArticleListFun() {
				let {
					active,
					page,
					newsList,
					status
				} = this;
				loadingFun(getArticleList, page, newsList, status, {
					type: this.type,
					id: active ? active.toString() : '',
					page_no: page
				}).then(res => {
					if (res) {
						this.page = res.page;
						this.newsList = res.dataList
						this.status = res.status
					}
				})
			},

			goPage(e) {
				let {
					id
				} = e.currentTarget.dataset;
				uni.navigateTo({
					url: `/pages/news_details/news_details?id=${id}&type=${this.type}`
				});
			}

		}
	};
</script>
<style lang="scss">
	/* pages/information/information.wxss */
	.news_list {
		.category-list{
			position: relative;
			padding-top: 50rpx;
			overflow-x: auto;
			margin-bottom: 30rpx;
			
			.category-item{
				margin-right: 20rpx;
				position: relative;
				&::after{
					content: '';
					position: absolute;
					width: 200rpx;
					height: 16rpx;
					left: 20rpx;
					top: -16rpx;
					background: #dddddd;
					border-radius: 10rpx 10rpx 0 0;
				}
				
				&::before{
					content: '';
					position: absolute;
					width: 170rpx;
					height: 16rpx;
					left: 40rpx;
					top: -28rpx;
					background: rgba(#dddddd,.6);
					border-radius: 10rpx 10rpx 0 0;
				}
				
				.cover{
					width: 240rpx;
					height: 160rpx;
					border-radius: 10rpx;
				}
				
				.title{
					display: block;
					text-align: center;
					padding-top: 10rpx;
				}
			}
		}
		.main {
			.article-list {
				.article-item {
					overflow: hidden;
					padding: 10rpx 20rpx;
					align-items: flex-start;

					.info {
						flex: 1;
						padding: 2%;
						// font-size: 12px;
					}

					.img {
						width: 240rpx;
						height: 180rpx;
						flex: none;
					}
				}

				&:last-of-type {
					border: none;
				}
			}
		}

		.footer {
			padding: 30rpx 0;
		}
	}

</style>